﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="KeyBehaviourForm.aspx.cs"
    Inherits="Assesment.Web.Forms.Administration.Catalog.KeyBehaviourForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>City Form</title>
    <style type="text/css">
        table.gridtable
        {
            font-family: verdana,arial,sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th
        {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td
        {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.wrapper.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.msgBox.v1.js") %>" type="text/javascript"></script>
    <script type="text/javascript">

        $("#btnSave").button({ icons: { primary: "ui-icon-disk"} });
        $("#btnClose").button({ icons: { primary: "ui-icon-close"} });

        $("#addLevel").button({ icons: { primary: "ui-icon-plus"} });

        $('#btnClose').click(function () {
            parent.$('#dialog').dialog("close");
        });
 
    </script>
    <script type="text/javascript">

        $(document).ready(function () {


            var comptid = $('#<%= hfID.ClientID %>').val();
            if (comptid != "") {
                loadLevel();
            }
            // 1. prepare the validation rules and messages.
            var rules = {
                ddlRowStatus: "required",
                txtDescription: {
                    required: true

                }
            };
            var messages = {
                ddlRowStatus: "Status wajib di isi",
                txtDescription: {
                    required: "Kompetensi  wajib di isi"
                }
            };

            $("#txtDescription").inputmask("Regex", { regex: "[A-Za-z-.0-9 ]*" });

            // 2. Initiate the validator
            var validator = new jQueryValidatorWrapper("form1", rules, messages);

            // 3. Set the click event to do the validation
            $("#btnSave").click(function () {

                if (!validator.validate())
                    return;

                var level = [];
                var definitionarea2 = "";
                var newText = "";
                var counter = 1;
                $('#tbllevel tr').each(function () {
                    var datadefinition = $('[name=txtKeyBehaviourName' + counter + ']').val(); //$('textarea[name=txtAreaDef' + counter + ']').val();
                    //definitionarea.push(datadefinition);
                    definitionarea2 += datadefinition + "|";

                    //var datalevel = $('[name=txtLevel' + counter + ']').val();
                    //level.push(datalevel);

                    counter++;
                });

                
                var competencyid = $("#ddlKompetensi option:selected").val();
                var levelid = $("#ddlLevel option:selected").val();
                var id = $('#<%= hfID.ClientID %>').val();

                var objKeyBehaviour = new Object();
                objKeyBehaviour.KeyBhvID = id;
                objKeyBehaviour.CompetencyID = encodeURIComponent(competencyid);
                objKeyBehaviour.LevelCompetencyID = encodeURIComponent(levelid);
                objKeyBehaviour.KeyBehaviourName = encodeURIComponent(definitionarea2);
                jsonData = JSON.stringify(objKeyBehaviour);

                var handlerUrl = '<%= ResolveUrl("~/ajaxhandler/administration/catalog/KeyBehaviourHandler.ashx") %>';

                if (id == 0)
                    CallAjax(handlerUrl, "?method=insert", jsonData);
                else {
                    CallAjax(handlerUrl, "?method=update", jsonData);
                }

                parent.$('#dialog').dialog('close');

                setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);

                return false;
            });


        });

        function loadLevel() {

            var keyID = $('#<%= hfID.ClientID %>').val();
            var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/KeyBehaviourDetailLoad.ashx?method=getbykeybehaviour") %>';
            var counter = 1;
            $.ajax({
                type: 'GET',
                url: handlerUrl + "&keyID=" + keyID,
                contentType: 'application/json',
                dataType: 'json',
                success: function (datas) {
                    $.each(datas, function (i, data) {
                        var html = "";
                        html = "<tr id='tr" + counter + "'><td>" + '<input type="text" size="100px" name="txtKeyBehaviourName' + counter + '" id="txtKeyBehaviourName' + counter + '" value="' + data.KeyBehaviourName + '" />' + "</td>" + " <td> <input type='button' id='btnhapus" + counter + "' onclick='hapusrow(" + counter + ")' value='hapus' /> </td> </tr>";
                        $("#tbllevel").append(html)
                        counter++;
                    });
                },
                error: function () {
                    alert('Error load key behaviour detail');
                }
            });

            return false;
        }
    
    </script>
    <script type="text/javascript">

        function ClearText() {
            $('#txtDescription').val('');
            $('#txtDefinition').val('');
        }
        
         
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addLevel").click(function () {
                var counterText = 1;
                $('#tbllevel' + ' input[type=text]').each(function () {
                    counterText++;
                });

                html = "<tr id='tr" + counterText + "'><td>" + '<input type="text" size="100px" name="txtKeyBehaviourName' + counterText + '" id="txtKeyBehaviourName' + counterText + '" value="" />' + "</td>" + "<td> <input type='button' id='btnhapus" + counterText + "' onclick='hapusrow(" + counterText + ")' value='hapus' />  </td> </tr>";
                $("#tbllevel").append(html)
            });


        });

        function hapusrow(id) {
            $("#tr" + id).remove();
            return false;
        }
    </script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#ddlGroup').change(function () {
                var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/CompetencyLoad.ashx") %>';
                var group = $("#ddlGroup option:selected").val();
                $('#txtDefinition').val('');
                $('#txtDeskripsiLevel').val('');
                if (group != "") {
                    var $ddlKompetensi = $('#ddlKompetensi');
                    $('#ddlKompetensi').find('option:not(:first)').remove();
                    $.ajax({
                        type: 'POST',
                        url: handlerUrl + "?method=getbygroup&group=" + group,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (datas) {
                            $ddlKompetensi.get(0).options[0] = new Option("-- pilih kompetensi --", "");
                            $.each(datas, function (i, data) {
                                $ddlKompetensi.append('<option value="' + data.ComptID + '">' + data.CompetncyDesc + '</option>');
                            });

                        },
                        error: function () {
                            alert('Error load group kompetensi !');
                        }
                    });
                }
            });


            $('#ddlKompetensi').change(function () {
                var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/CompetencyLoad.ashx") %>';
                var comptID = $("#ddlKompetensi option:selected").val();
                $('#txtDefinition').val('');
                $('#txtDeskripsiLevel').val('');
                if (comptID != "") {
                    $.ajax({
                        type: 'POST',
                        url: handlerUrl + "?method=getbyid&comptID=" + comptID,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (datas) {

                            $.each(datas, function (i, data) {
                                $('#txtDefinition').val(data.Definition);
                            });

                            LoadLevelByCompetencyID(comptID);
                            
                        },
                        error: function () {
                            alert('Error load kompetensi !');
                        }
                    });
                }
            });


            $('#ddlLevel').change(function () {
                var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/LevelCompetencyLoad.ashx") %>';
                var levelID = $("#ddlLevel option:selected").val();
                $('#txtDeskripsiLevel').val('');
                if (levelID != "") {
                    $.ajax({
                        type: 'POST',
                        url: handlerUrl + "?method=getbyid&levelID=" + levelID,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (datas) {

                            $.each(datas, function (i, data) {
                                $('#txtDeskripsiLevel').val(data.Definition);
                            });

                            LoadLevelByCompetencyID(comptID);

                        },
                        error: function () {
                            alert('Error load deskripsi level !');
                        }
                    });
                }
            });

        });


        function LoadLevelByCompetencyID(comptID) {

            var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/Administration/catalog/LevelCompetencyLoad.ashx") %>';

            if (comptID != "") {
                var $ddlLevel = $('#ddlLevel');
                $('#ddlLevel').find('option:not(:first)').remove();
                $.ajax({
                    type: 'POST',
                    url: handlerUrl + "?method=getlevelcomptid&comptID=" + comptID,
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (datas) {
                        $ddlLevel.get(0).options[0] = new Option("-- pilih level --", "");
                        $.each(datas, function (i, data) {
                            $ddlLevel.append('<option value="' + data.ID + '">' + data.Level + '</option>');
                        });

                    },
                    error: function () {
                        alert('Error load level  !');
                    }
                });
            }
        }
    
    </script>
</head>
<body onload="ClearText();">
    <form id="form1" runat="server">
    <table border="0">
        <tr>
            <td style="width: 50">
                Group Kompetensi
            </td>
            <td>
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlGroup" runat="server" Width="300">
                <asp:ListItem Text="---pilih group---" Value=""></asp:ListItem>
                    <asp:ListItem Text="Core Competency" Value="CP"></asp:ListItem>
                    <asp:ListItem Text="Managerial Competency" Value="MP"></asp:ListItem>
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td>
                Kompetensi
            </td>
            <td>
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlKompetensi" runat="server" Width="300">
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Deskripsi
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:TextBox ID="txtDefinition" TextMode="MultiLine" Rows="2" runat="server" Width="500"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Level
            </td>
            <td>
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlLevel" runat="server" Width="300">
                </asp:DropDownList>
                &nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Deskripsi Level
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:TextBox ID="txtDeskripsiLevel" TextMode="MultiLine" Rows="3" runat="server"
                    Width="500"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <asp:HiddenField ID="hfID" runat="server" />
            </td>
        </tr>
    </table>
    <div>
        <table class="gridtable" border="1" id="tbllevel" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <th align="center">
                    Nama Key Behaviour
                </th>
                <th>
                    &nbsp;
                </th>
            </tr>
        </table>
    </div>
    <div>
        <button id="addLevel" type="button">
            Tambah Level</button>
        <%--  <input type="button" value='Tambah Level' id='addlevel2' />--%>
    </div>
    <div style="text-align: right; padding-top: 10px;">
        <button id="btnSave" type="button">
            Save</button>
        <button id="btnClose" type="button">
            Close</button>
    </div>
    </form>
</body>
</html>
